<!--
 * @Description: ...
 * @Author: yangli 121029539@qq.com
 * @Date: 2025-02-06 11:23:56
 * @LastEditTime: 2025-02-18 17:18:48
 * @LastEditors: yangli 121029539@qq.com
 * @FilePath: \uniapp\src\pages\index\index.vue
-->
<template>
    <view class="bg-page">
        <view class="p-[20rpx] bg-white">
            <image src="/static/images/home/logo@2x.png" mode="widthFix" class="w-[190rpx]" />
            <view class="py-[30rpx]">
                <u-swiper :list="state.bannerList" height="328" border-radius="10"></u-swiper>
            </view>
        </view>
        <view class="mb-[10px] bg-white">
            <u-grid :col="4" :border="false">
                <u-grid-item @click="toPage(item.path, item.type)" :custom-style="{ padding: '0 0 32rpx 0' }"
                    v-for="(item, index) in dataList" :key="index">
                    <image :src="item.icon" class="w-[96rpx] h-[96rpx]" />
                    <view class="text-main text-base mt-[14rpx]">
                        {{ item.title }}
                    </view>
                </u-grid-item>
            </u-grid>
        </view>
        <view class="px-[38rpx] py-[32rpx] bg-white">

            <u-grid :col="3" :border="false">
                <!-- @click="toPage(`/pagesbaoxian/list?type=${item.type}`)"  -->
                <u-grid-item @click="toApply(item)" :custom-style="{ padding: '0 0 50rpx 0' }"
                    v-for="(item, index) in state.modeList" :key="index">
                    <!-- <image  :src="`/static/images/home/menu${index+1}.png`" class="w-[96rpx] h-[96rpx] " /> -->
                    <image :src="item.img" class="w-[96rpx] h-[96rpx]" />
                    <view class="text-main text-base mt-[14rpx]">
                        {{ item.name }}
                    </view>
                </u-grid-item>
            </u-grid>
        </view>
    </view>
</template>

<script setup lang="ts">
import { modelList, bannerList, goodsList } from '@/api/repair'


import { onLoad, onShow, onPageScroll } from '@dcloudio/uni-app'
import { computed, reactive, ref, shallowRef } from 'vue'
import { useAppStore } from '@/stores/app'
import { useUserStore } from '@/stores/user'

const appStore = useAppStore()
const userStore = useUserStore()
const token = computed(() => userStore.token)





const modalInfo = computed(() => appStore.modalInfo)

const dataList = [
    {
        title: '我要投保',
        path: '/pagesbaoxian/apply',
        icon: '/static/images/home/entry1.png',
    },
    {
        title: '我要报修',
        path: '/pagesrepair/applyinrepair?type=0',
        icon: '/static/images/home/entry2.png',
    },
    {
        title: '我要换机',
        path: '/pages/huanxin_query/index',
        icon: '/static/images/home/huanji.png'
    },
    {
        title: '新手指引',
        path: '/pages/news/news',

        icon: '/static/images/home/entry3.png'
    },
    {
        title: '兑换权益',
        path: '/pagesbaoxian/exchange',
        icon: '/static/images/home/entry4.png'
    }
]

const state = reactive({
    bannerList: [
        'https://www.ihjmf.com/uploads/banner/1.jpg',
        'https://www.ihjmf.com/uploads/banner/2.jpg',
        'https://www.ihjmf.com/uploads/banner/3.jpg',
        'https://www.ihjmf.com/uploads/banner/4.jpg',
    ],
    modeList: []
})
const toPage = (path: any, type = 1) => {
    // if(!token.value) return uni.navigateTo({url:'/pages/login/login'})
    if (type == 2) {
        uni.switchTab({ url: path })
    } else {
        uni.navigateTo({ url: path })
    }
}

function toApply(item: any) {
    if (!token.value) {
        uni.navigateTo({ url: '/pages/login/login' })
    } else {

        // 使用uni.navigateTo跳转到指定页面
        uni.navigateTo({
            url: `/pagesbaoxian/apply?product_type_id=${item.id}`
            // 设置跳转页面的URL，将item对象编码后作为参数传递
        })
    }
}

// 机型列表
const init = async () => {
    const data = await goodsList({})
    state.modeList = data
}
// banner列表
const initBanner = async () => {
    // const data = await bannerList()
    // state.bannerList = data;
}
onShow(() => {
    init()
    initBanner()
})

onLoad(() => { })
</script>

<style lang="scss" scoped></style>
